<template>
  <div>
    <!-- 头部 -->
    <myDivider name="工单详情"></myDivider>
    <el-page-header @back="$router.push('/workOrder/workManage')">
    </el-page-header>
    <div class="selectBtn" v-if="scene != '工单归档'">
      <el-popover placement="bottom" width="60px" trigger="click">
        <div style="width:50px;cursor: pointer;">
          <div v-if="scene == '工单登记'" style="width: 100%;text-align: center;;margin-bottom: 20px" @click="updateClick">
            编辑</div>
          <div style="width: 100%;text-align: center;color: red;" @click="chargebackClick">退单</div>
        </div>
        <i slot="reference" style="font-size: 34px;position: absolute;right: 135px;top: 100px;"
          class="el-icon-s-operation"></i>
      </el-popover>
    </div>
    <!-- 表单 -->
    <el-form :rules="rules" ref="ruleForm" class="fromStyle" :model="formData" label-width="150px">
      <div style="display: flex;">
        <el-form-item label="报事日期：">
          <div style="width: 222px;">
            {{ formData.acceptTime }}
          </div>
        </el-form-item>
        <el-form-item label="事件编号：">
          <div style="width: 222px;">
            {{ formData.eventsNumber }}
          </div>
        </el-form-item>
      </div>
      <div style="display: flex;">
        <el-form-item label="报事类别：">
          <el-select disabled style="width: 222px;" v-model="formData.eventsCategory" placeholder="请选择报事类别">
            <el-option label="报修" value="1"></el-option>
            <el-option label="咨询" value="2"></el-option>
            <el-option label="建议" value="3"></el-option>
            <el-option label="表扬" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="服务类别：" v-if="formData.eventsCategory == '1'">
          <el-select disabled style="width: 222px;" v-model="formData.category" placeholder="请选择服务服务类表">
            <el-option label="电路" value="1"></el-option>
            <el-option label="电器" value="2"></el-option>
            <el-option label="主体结构" value="3"></el-option>
            <el-option label="给排水" value="4"></el-option>
            <el-option label="综合类" value="5"></el-option>
          </el-select>
        </el-form-item>
      </div>

      <el-form-item label="报事区域：">
        <el-input style="width: 594px" placeholder="报事区域" disabled v-model="formData.region"></el-input>
      </el-form-item>

      <div style="display: flex">
        <el-form-item label="客户信息：">
          <el-input style="width: 222px;" disabled v-model="formData.customerName" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="联系方式：">
          <el-input style="width: 222px;" disabled v-model="formData.phone" placeholder=""></el-input>
        </el-form-item>
      </div>

      <el-form-item label="报事方式：">
        <el-select style="width: 222px;" v-model="formData.orderWay" placeholder="请选择报事方式" disabled>
          <el-option label="来访" value="1"></el-option>
          <el-option label="呼叫中心" value="2"></el-option>
          <el-option label="内部人员反馈" value="3"></el-option>
          <el-option label="客户端" value="4"></el-option>
          <el-option label="其它渠道" value="5"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="预约时间：">
        <el-input style="width: 594px;" disabled v-model="ywsj" placeholder=""></el-input>
      </el-form-item>

      <el-form-item label="报事内容：">
        <el-input style="width: 594px;" disabled type="textarea" show-word-limit :rows="3" maxlength="200"
          placeholder="请输入内容" v-model="formData.eventsDescription">
        </el-input>
      </el-form-item>

      <el-form-item label="报事图片：">
        <div v-if="formData.imgs != null && formData.imgs.length > 0">
          <el-image v-for="item, i in formData.imgs" :key="i" style="width: 100px; height: 100px;margin-right: 10px;"
            :src="item" :preview-src-list="formData.imgs">
          </el-image>
        </div>
        <span style="color: #aaa;" v-else>无报事图片</span>
      </el-form-item>

      <div style="display: flex;">
        <el-form-item label="内部工单号：">
          <el-input :disabled="scene != '工单登记'" style="width: 220px;" maxlength="30" placeholder="请输入内部工单号"
            v-model="formData.orderNumber">
          </el-input>
        </el-form-item>
        <el-form-item label="单据号：" label-width="80px">
          <div style="width: 100px;">
            {{ formData.workOrderNumber }}
          </div>
        </el-form-item>
        <el-form-item label="工单状态：" label-width="100px">
          <div style="width: 100px;">
            {{ scene }}
          </div>
        </el-form-item>
      </div>



      <el-form-item label="工单级别：">
        <el-select :disabled="scene != '工单登记'" style="width: 222px;" v-model="formData.urgency" placeholder="请选择工单级别">
          <el-option label="一般" value="1"></el-option>
          <el-option label="紧急" value="2"></el-option>
          <el-option label="特急" value="3"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="派工内容：">
        <el-input :disabled="scene != '工单登记'" style="width: 594px;" rows="3" type="textarea"
          v-model="formData.description" placeholder="请输入派工内容"></el-input>
      </el-form-item>

      <el-form-item label="服务部门："  prop="depts">
        <el-cascader clearable :disabled="scene != '工单登记'" change-on-select v-model="formData.depts"
          :options="DepartmentList" @change="handleChange"></el-cascader>
      </el-form-item>

      <el-form-item label="服务人员：" prop="workerId">
        <el-select clearable :disabled="scene != '工单登记'" v-model="formData.workerId" placeholder="请先选择部门">
          <el-option v-for="item, i in waiterList" :key="i" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="任务进度：" v-if="myOrderStatusList.length > 0">
        <div class="rwjdList">
          <div class="el" v-for="item, i in myOrderStatusList" :key="i">
            <div class="top">
              <div>
                <div class="cir"></div>
              </div>
              <div><span style="font-weight: bold;">{{ item.d1 }}</span>（{{ item.d2 }}）
              </div>
              <div>{{ item.d3 }}</div>
              <div>
                <span v-if="item.d4">
                  {{ item.d4 }}
                </span>
              </div>
              <div>时间：{{ item.d5 }}</div>
            </div>
            <div class="main">
              <el-image v-for="imgItem,ii in item.imgs" :key="ii" style="width: 100px; height: 100px;margin-right: 10px;" :src="imgItem"
                :preview-src-list="item.imgs">
              </el-image>
              <div v-if="item.text">
                {{ item.text }}
              </div>
            </div>
          </div>
        </div>
      </el-form-item>
    </el-form>
    <div class="btn" v-if="scene != '工单归档'">
      <el-button style="width: 100px;" @click="goBack">取消</el-button>
      <el-button style="width: 100px;" type="success" plain @click="print" v-if="scene == '任务派工'">打印</el-button>
      <el-button style="width: 100px;" type="primary" @click="submit">
        {{
          scene == '工单登记' ? '立即派单' :
            scene == '任务派工' ? '立即结单' :
              scene == '任务回单' ? '归档' : ''
        }}
      </el-button>
    </div>

    <!-- 退单弹窗 -->
    <el-dialog title="提示" :visible.sync="chargebackPopShow" width="30%">

      <el-form ref="chargebackPopForm" :rules="chargebackPopRules" :model="chargebackPopForm" label-width="100px">
        <el-form-item label="退单原因：">
          <el-input type="textarea" :rows="4" placeholder="请输入" maxlength="200" show-word-limit
            v-model="chargebackPopForm.reason"></el-input>
        </el-form-item>
      </el-form>
      <div style="padding-left: 15px;">
        {{
          scene == '工单登记' ? '退单后，工单关联事件变为未处理，确认退单吗？' :
            scene == '任务派工' ? '退单后，工单回退为工单登记状态，确认退单吗？' :
              scene == '任务回单' ? '退单后，工单回退为任务派工状态，服务人员需重新结单，确认退单吗？' : ''
        }}
      </div>
      <span slot="footer">
        <el-button @click="chargebackPopShow = false">取 消</el-button>
        <el-button type="primary" @click="chargebackPopOk">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 结单弹窗 -->
    <el-dialog title="结单" :visible.sync="endWorkPopShow" width="40%">

      <el-form ref="endWorkPopForm" :model="endWorkPopForm" label-width="80px">
        <el-form-item label="备注：">
          <el-input type="textarea" :rows="4" placeholder="请输入备注" maxlength="200" show-word-limit
            v-model="endWorkPopForm.notes"></el-input>
        </el-form-item>
        <el-form-item>
          <myuploadByCHGLImg :id="uploadId" v-if="endWorkPopShow" @getImgList="getImgList"
            uploadUrl="/business/order/uploadImg" deleteUrl="/business/order/deleteImg"></myuploadByCHGLImg>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="endWorkPopShow = false">取 消</el-button>
        <el-button type="primary" @click="endWorkPopOk">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 回单弹窗 -->
    <el-dialog title="提示" :visible.sync="receiptPopShow" width="30%">

      <el-form ref="receiptPopForm" :rules="receiptPopRules" :model="receiptPopForm" label-width="100px">
        <el-form-item label="处理结果：" prop="reason">
          <el-input type="textarea" :rows="4" placeholder="请输入" maxlength="200" show-word-limit
            v-model="receiptPopForm.reason"></el-input>
        </el-form-item>
      </el-form>
      <div style="padding-left: 15px;">
        归档后不可修改工单，确定归档吗？
      </div>
      <span slot="footer">
        <el-button @click="receiptPopShow = false">取 消</el-button>
        <el-button type="primary" @click="receiptPopOk">确 定</el-button>
      </span>
    </el-dialog>



    <!-- 打印内容！！！！ -->
    <!-- 打印内容！！！！ -->
    <!-- 打印内容！！！！ -->
    <div id="printMe" style="display: none;">
      <div style="width: 710px;">
        <div style=" font-size: 34px;text-align: center;width: 100%;margin-bottom: 20px;">物业派工单</div>
        <div style=" display: flex;justify-content: space-between;width: 100%;">
          <div style="display: flex;align-items: center;">
            工单级别：
            <div style="height: 15px;width: 15px;border: 1px solid black; margin: 0 5px 0 10px;"></div>一般
            <div style="height: 15px;width: 15px;border: 1px solid black;margin: 0 5px 0 10px;"></div>紧急
            <div style="height: 15px;width: 15px;border: 1px solid black;margin: 0 5px 0 10px;"></div>特急
          </div>
          <div>
            单据号：{{ printFrom.workOrderNumber }}
          </div>
        </div>
        <div style="width: 100%;">
          <table style="border-collapse: collapse;width: 100%;table-layout: fixed;margin-top: 20px;">
            <tbody>
              <tr>
                <td style="   border: 1px solid black;text-align: center;height: 45px;width: 80px;">维修类别</td>
                <td style="   border: 1px solid black;text-align: center;height: 45px;" colspan="6">
                  <div style="display: flex;align-items: center;">
                    <div style="height: 15px;width: 15px;border: 1px solid black;margin: 0 5px 0 10px;"></div>电路
                    <div style="height: 15px;width: 15px;border: 1px solid black;margin: 0 5px 0 10px;"></div>电器
                    <div style="height: 15px;width: 15px;border: 1px solid black;margin: 0 5px 0 10px;"></div>主体结构
                    <div style="height: 15px;width: 15px;border: 1px solid black;margin: 0 5px 0 10px;"></div>给排水
                    <div style="height: 15px;width: 15px;border: 1px solid black;margin: 0 5px 0 10px;"></div>综合类
                  </div>

                </td>
              </tr>
              <tr>
                <td style="   border: 1px solid black;text-align: center;height: 45px;">报修时间</td>
                <td style="   border: 1px solid black;text-align: center;height: 45px;" colspan="2">
                  {{ printFrom.eventDay }}
                </td>
                <td style="   border: 1px solid black;text-align: center;height: 45px;">报事人</td>
                <td style="   border: 1px solid black;text-align: center;height: 45px;">{{ printFrom.customerName }}
                </td>
                <td style="   border: 1px solid black;text-align: center;height: 45px;">联系方式</td>
                <td style="   border: 1px solid black;text-align: center;height: 45px; letter-spacing: -1px;">{{
                  printFrom.phone }}</td>
              </tr>
              <tr>
                <td style="   border: 1px solid black;text-align: center;height: 45px;">报事区域</td>
                <td style="   border: 1px solid black;text-align: center;height: 45px;" colspan="2">{{ formData.region
                  }}
                </td>
                <td style="   border: 1px solid black;text-align: center;height: 45px;">预约时间</td>
                <td style="   border: 1px solid black;text-align: center;height: 45px;" colspan="3">{{ ywsj }}
                </td>
              </tr>
              <tr>
                <td style="   border: 1px solid black;text-align: center;height: 45px;">事件情况</td>
                <td style="   border: 1px solid black;text-align: center;height: 45px;" colspan="6">
                  <div style="width: 100%">
                    <div style="text-align: left;margin-bottom: 10px;">报事内容：{{ printFrom.eventsDescription }}</div>
                    <div style="text-align: left;margin-bottom: 10px;">派工内容：{{ printFrom.description }}</div>
                    <div style="text-align: right;">
                      记录人：{{ printFrom.userName }}   受理时间：{{ printFrom.acceptTime }}
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td style="   border: 1px solid black;text-align: center;height: 45px;" rowspan="2">处理情况</td>
                <td style="   border: 1px solid black;text-align: center;height: 45px;" colspan="6"></td>
              </tr>
              <tr>
                <td style="   border: 1px solid black;text-align: center;height: 45px;">完成时间</td>
                <td style="   border: 1px solid black;text-align: center;height: 45px;"></td>
                <td style="   border: 1px solid black;text-align: center;height: 45px;">维修人</td>
                <td style="   border: 1px solid black;text-align: center;height: 45px;"></td>
                <td style="   border: 1px solid black;text-align: center;height: 45px;">检查人</td>
                <td style="   border: 1px solid black;text-align: center;height: 45px;"></td>
              </tr>
              <tr>
                <td style="   border: 1px solid black;text-align: center;height: 45px;" rowspan="2">客户确认</td>
                <td style="   border: 1px solid black;text-align: center;height: 45px;" colspan="6">

                </td>
              </tr>
              <tr>
                <td style="   border: 1px solid black;text-align: center;height: 45px;">完成时间</td>
                <td style="   border: 1px solid black;text-align: center;height: 45px;" colspan="2"></td>
                <td style="   border: 1px solid black;text-align: center;height: 45px;">客户签字</td>
                <td style="   border: 1px solid black;text-align: center;height: 45px;" colspan="2"></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <!-- 打印内容！！！！ -->
    <!-- 打印内容！！！！ -->
    <!-- 打印内容！！！！ -->
  </div>
</template>

<script>
import myuploadByCHGLImg from '@/components/upload/myuploadByCHGLImg.vue'
export default {
  components: {
    myuploadByCHGLImg
  },
  data() {
    return {
      logOnUser: {},
      scene: '工单登记', //编辑/工单登记/任务派工/任务回单/工单归档
      formData: {},
      ywsj: '',//预约时间
      rules: {
        depts: [
          { required: true, message: '请选择服务部门', trigger: 'change' }
        ],
        workerId: [
          { required: true, message: '请选择服务人员', trigger: 'change' }
        ],
      },
      TimeSelect: [
        { val: '08:00:00~09:00:00', disabled: false },
        { val: '09:00:00~10:00:00', disabled: false },
        { val: '10:00:00~11:00:00', disabled: false },
        { val: '11:00:00~12:00:00', disabled: false },
        { val: '14:00:00~15:00:00', disabled: false },
        { val: '15:00:00~16:00:00', disabled: false },
        { val: '16:00:00~17:00:00', disabled: false },
        { val: '17:00:00~18:00:00', disabled: false },
      ],
      // 部门列表
      DepartmentList: [],
      waiterList: [],

      // 退单弹窗
      chargebackPopShow: false,
      chargebackPopForm: {},
      chargebackPopRules: {
        reason: [
          { required: true, message: '请输入退单原因', trigger: 'blur' }
        ],
      },
      //结单弹窗
      endWorkPopShow: false,
      uploadId: 0,
      endWorkPopForm: {},
      // 回单弹窗
      receiptPopShow: false,
      receiptPopForm: {},
      receiptPopRules: {
        reason: [
          { required: true, message: '请输入处理结果', trigger: 'blur' }
        ],
      },
      myOrderStatusList: [],
      printFrom: {}
    }
  },

  async activated() {
    this.formData = {}
    this.logOnUser = JSON.parse(sessionStorage.getItem('logOnUser'))

    // 工单详情
    let res = await this.$api.events.DetailWork(this.$route.query.id)
    console.log(res.data, '工单详情');
    this.printFrom = res.data
    if (res.code != 200) {
      this.$message.error(res.message)
      return
    }
    switch (res.data.status) {
      case '1':
        this.scene = '工单登记'
        break
      case '2':
        this.scene = '任务派工'
        break
      case '3':
        this.scene = '任务回单'
        break
      case '4':
        this.scene = '工单归档'
        break
    }

    this.uploadId = res.data.id
    this.formData.workOrderNumber = res.data.workOrderNumber
    this.formData.acceptTime = res.data.acceptTime
    this.formData.eventsNumber = res.data.eventsNumber
    this.$set(this.formData, 'eventsCategory', res.data.eventsCategory)
    this.$set(this.formData, 'category', res.data.category)

    this.$set(this.formData, 'serviceCategory', res.data.serviceCategory)
    if (res.data.isPublic == 1) { //公共区域
      this.formData.region = `${res.data.residentialName}/公共区域`
    } else { //私人区域
      this.formData.region = `${res.data.residentialName}/${res.data.buildingName}/${res.data.unitCode}/${res.data.floors}/${res.data.roomName}`
    }
    this.$set(this.formData, 'customerId', res.data.customerId)
    this.$set(this.formData, 'customerName', res.data.customerName)
    this.$set(this.formData, 'phone', res.data.phone)
    this.$set(this.formData, 'orderWay', res.data.orderWay)

    this.myOrderStatusList = []
    res.data.orderStatusList.forEach(el => {
      let d1 = ''
      let d2 = ''
      let d3 = ''
      let d4 = ''
      let text = el.remark?el.remark:''
      let imgs = el.imgs?el.imgs:[]
      switch (el.status) {
        case '1':
          d1 = el.oper == '1' ? '办理' : '退单'
          d2 = '工单登记'
          d3 = `经办人：${el.userName}`
          d4 = ''
          break
        case '2':
            d1 = el.oper == '1' ? '派单' : '退单'
          d2 = '任务派工'
          d3 = `经办人：${el.userName}`
          d4 = `服务人员：${el.workerName}`
          break
        case '3':
            d1 = el.oper == '1' ? '结单' : '退单'
          d2 = '任务回单'
          d3 = `结单人：${el.workerName}`
          d4 = ''
          break
        case '4':
            d1 = el.oper == '1' ? '归档' : '退单'
          d2 = '工单归档'
          d3 = `归档人：${el.workerName}`
          d4 = ''
          break
      }
      this.myOrderStatusList.push({
        d1, d2, d3, d4, d5: el.createTime, text, imgs
      })
    })

    // 预约时间
    this.ywsj = `${res.data.reservationDay ? res.data.reservationDay : ''}  
    ${res.data.reservationInterval ? res.data.reservationInterval : ''}`
    // 事件的内容
    this.$set(this.formData, 'eventsDescription', res.data.eventsDescription)
    // 工单的内容
    this.$set(this.formData, 'description', res.data.description)
    if (res.data.imgs == null) { //图片处理
      this.$set(this.formData, 'imgs', [])
    } else {
      this.$set(this.formData, 'imgs', res.data.imgs)
    }
    this.$set(this.formData, 'orderNumber', res.data.orderNumber)
    this.$set(this.formData, 'urgency', res.data.urgency)
    // 回显服务部门/服务人员
    this.getDepartmentList().then(() => {
      if (res.data.depts) {
        this.$set(this.formData, 'depts', res.data.depts)
      } else {
        this.$set(this.formData, 'depts', [])
      }
      this.getWaiterList().then(() => {

        if (res.data.workerId) {
          this.$set(this.formData, 'workerId', res.data.workerId)
        } else {
          this.$set(this.formData, 'workerId', '')

        }
        this.$nextTick(() => {
          this.$refs['ruleForm'].clearValidate()
        })
      })
    })








    this.$nextTick(() => {
      this.$refs['ruleForm'].clearValidate()
    })
  },
  methods: {
    async getWaiterList() {
      if (this.formData.depts.length == 0) return
      let res = await this.$api.events.myGetUserListByDepId(this.formData.depts[this.formData.depts.length - 1])
      if (res.code == 200) {
        this.waiterList = res.data
      } else {
        this.$message.error(res.message)
      }
    },
    async chargebackPopOk() { //退单弹窗按钮确定
      this.$refs['chargebackPopForm'].validate(async (valid) => {
        if (valid) {
          let res = await this.$api.axios.post('/business/order/backOrder', {
            "orderId": this.$route.query.id, //工单id
            "remark": this.chargebackPopForm.reason //原因
          })
          if (res) {
            this.chargebackPopShow = false
            this.$message({
              type: 'success',
              message: '退单成功'
            })

            setTimeout(() => {
              this.$router.push('/workOrder/workManage')
            }, 500)
          }

        } else {
          return false;
        }
      });
    },
    getImgList(val) {
      this.endWorkPopForm.imgs = val
    },
    endWorkPopOk() { //结单弹窗确定按钮
      this.$confirm('结单后，工单变为任务回单状态，结单后不可修改，确定结单吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(async () => {
        let res = await this.$api.axios.post('/business/order/receiptOrder', {
          "id": this.$route.query.id,
          "receiptInfo": this.endWorkPopForm.notes,//结单内容
          "receiptImgs": this.endWorkPopForm.imgs
        })
        if (res) {
          this.$message({
            type: 'success',
            message: '结单成功!'
          });
        }
        this.endWorkPopShow = false
        setTimeout(() => {
          // this.$router.push('/workOrder/workManage')
          location.reload()
        }, 400)

      }).catch(() => {

      });
    },
    receiptPopOk() { //归档弹窗确定按钮

      this.$refs['receiptPopForm'].validate(async (valid) => {
        if (valid) {
          this.receiptPopShow = false
          let res = await this.$api.axios.post('/business/order/completeOrder', {
            "id": this.$route.query.id,
            "result": this.receiptPopForm.reason
          })
          if (res) {
            this.$message({
              type: 'success',
              message: '归档成功!'
            });
          }
          this.receiptPopShow = false
          setTimeout(() => {
            // this.$router.push('/workOrder/workManage')
            location.reload()
          }, 400)
        } else {
          return false;
        }
      });
    },
    updateClick() {
      this.$router.push('/workOrder/workUpdate?id=' + this.$route.query.id)
    },
    chargebackClick() {
      this.chargebackPopShow = true
      this.$set(this.chargebackPopForm, 'reason', '')
      this.$nextTick(() => {
        this.$refs['chargebackPopForm'].clearValidate()
      })
    },
    async handleChange() {
      if (this.formData.depts != null && this.formData.depts.length != 0) {
        this.getWaiterList()
      } else {
        this.waiterList = []
      }
      this.$set(this.formData, 'workerId', '')
      this.$nextTick(() => {
        this.$refs['ruleForm'].clearValidate()
      })
    },
    // 递归
    dgfun(res) {
      let arr = []
      res.forEach(el => {
        // 如果有孩子们，继续遍历
        if (el.children != null) {
          el.children = this.dgfun(el.children)
        }
        arr.push({
          value: el.id,
          label: el.name,
          children: el.children,
        })
      })
      return arr
    },
    async getDepartmentList() {
      // 获取部门列表  
      let res = await this.$api.events.getDepartmentList({
        "unitType": this.logOnUser.unitType,
        "unitId": this.logOnUser.unitId,
        "pageNum": 1,
        "pageSize": 1000000
      })
      this.DepartmentList = this.dgfun(res.data.list)
      console.log(this.DepartmentList, ' this.DepartmentList');
    },

    submit() {
      if (this.scene == '工单登记') {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            this.$confirm('确定后派发工单，并通知服务人员，确定派单吗？派单后可再次修改服务人员。', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
            }).then(async () => {
              let res = await this.$api.axios.post('/business/order/dispatchOrder', {
                "id": this.$route.query.id,
                "orderNumber": this.formData.orderNumber,//内部工单号
                "urgency": this.formData.urgency,//工单级别：1一般、2紧急、3特急
                "description": this.formData.description,//服务内容
                "workerId": this.formData.workerId,//服务人员id
                "depts": this.formData.depts
              })
              if (res) {
                this.$message({
                  type: 'success',
                  message: '派工成功'
                })
                // this.$router.go(-1)
                setTimeout(() => {
                  location.reload()
                }, 400)
              }
            }).catch(() => {

            });
          } else {
            return false;
          }
        });
      } else if (this.scene == '任务派工') { //立即结单按钮
        this.endWorkPopShow = true
        this.$set(this.endWorkPopForm, 'notes', '')
      } else if (this.scene == '任务回单') { //归档按钮
        this.receiptPopShow = true
        this.$set(this.receiptPopForm, 'reason', '')
        this.$nextTick(() => {
          this.$refs.receiptPopForm.clearValidate()
        })
      } else if (this.scene == '工单归档') {

      }

    },
    goBack() {
      if (this.scene == '工单登记') {

      } else if (this.scene == '任务派工') {

      } else if (this.scene == '任务回单') {

      } else if (this.scene == '工单归档') {

      }
      this.$router.push('/workOrder/workManage')
    },
    print() {
      let printMe = document.querySelector('#printMe');
      let printWindow = window.open('', '_blank');
      printWindow.document.write(printMe.innerHTML);
      printWindow.document.close();
      printWindow.focus();
      printWindow.print();
      printWindow.close();
    },
    getSelectTime(e) {
      const today = new Date();
      const inputDate = new Date(e);
      today.setHours(0, 0, 0, 0);
      inputDate.setHours(0, 0, 0, 0);
      // 如果是今天，那么把今天之前的时间都设为不可选
      if (today.toISOString().slice(0, 10) === inputDate.toISOString().slice(0, 10)) {
        let time = new Date()
        this.TimeSelect.forEach(el => {
          el.disabled = time.getHours() >= el.val.slice(0, 2)
        })
      } else {
        this.TimeSelect.forEach(el => {
          el.disabled = false
        })
      }
    },
    // 点击日期后，时间筛选
    Timechange(e) {
      this.$set(this.formData, 'reservationInterval', null)
      this.getSelectTime(e)
    },


  },

  deactivated() {

  },
}
</script>

<style lang="less" scoped>
.rwjdList {
  .el {
    margin-bottom: 25px;


    .top {
      display: flex;
      align-items: center;

      >div {
        &:nth-child(1) {
          .cir {
            width: 8px;
            height: 8px;
            border-radius: 100px;
            background-color: #0043ce;
            box-shadow: 0 0 6px 3px #b1cdfa;
          }

          flex: 1;
        }

        &:nth-child(2) {
          flex: 6;
        }

        &:nth-child(3) {
          flex: 9;
        }

        &:nth-child(4) {
          flex: 9;
        }

        &:nth-child(5) {
          flex: 12;
        }
      }
    }

    .main {

      img {
        width: 100px;
        height: 100px;

      }

    }

  }
}

.Timestyle {
  position: relative;

  /deep/ .is-disabled {
    .el-input__inner {
      background-color: white;
      color: black;
    }
  }

  >span {
    position: absolute;
    right: 160px;
    top: 50%;
    transform: translateY(-50%);
  }
}

.fromStyle {
  margin: 50px 0 0 50px;
  width: 1000px;
}

// 添加取消按钮
.btn {
  background-color: white;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 4px 1px #e1e1e1;

}
</style>